<template>
  <div class="q-pa-sm q-gutter-y-sm">
    <!--        Loading-->
    <q-linear-progress stripe indeterminate style="height: 1px" v-show="loading"/>
    <!--        toolbar-->
    <q-toolbar class="text-primary">
      <q-btn flat round dense icon="home" @click="onClickLeft"/>
      <q-toolbar-title>
        搜索新书
      </q-toolbar-title>
      <q-btn flat round dense small @click="sdAdd" >手动添加</q-btn>
    </q-toolbar>
<!--    搜索-->
    <div class="q-pa-md" style="max-width: 300px">
      <q-input v-model="searchValue"  rounded outlined type="text" class="qsearch"  @keyup.13="search">
        <template v-slot:append>
          <q-icon name="search" @click="search"/>
        </template>
      </q-input>
    </div>
<!--    结果-->
    <div>

      <q-card class="my-card" :key="item.fromUrl" v-for="(item) in searchResult">
        <q-card-section>
          <div class="text-h6">{{item.bookName}}  </div>
          <div class="text-subtitle2" style="color: grey">by {{item.author}}</div>
        </q-card-section>

        <q-separator />

        <q-card-actions vertical>
          <q-btn flat @click="newBook(item)">添加</q-btn>
        </q-card-actions>
      </q-card>
    </div>
  </div>
</template>
<script>
import axios from 'axios'

export default {
  name: 'newbook',
  data () {
    return {
      novelbook: {},
      novelSites: [{ id: 0, siteName: '加载中' }],
      novelSitePicker: false,
      testList: [], // 测试列表
      testResult: null, // 测试结果
      loading: false,
      choseValue: {},
      searchValue: '',
      searchResult: []
    }
  },
  mounted () {
  },
  methods: {
    sdAdd () {
      this.$router.push('/newbook').catch(() => {})
    },
    newBook (item) {
      const _this = this

      axios({
        url: '/novelBook/insertNovelBook',
        params: item
      }).then(res => {
        if (res.data.state === 'success') {
          _this.$q.notify('添加成功，正在准备更新内容')
          const id = res.data.obj
          _this.updateBook(id)
        } else {
          _this.$q.notify('error')
        }
      }).catch(res => {
        _this.$q.notify('error')
      })
    },

    updateBook (id) {
      const _this = this
      _this.loading = true
      axios({
        url: 'reptile/updateNovelBookFromZhwenpg?bookId=' + id
      }).then(res => {
        // eslint-disable-next-line no-console
        console.log(res)
        if (res.data === -1) {
          _this.$q.notify('服务异常')
        } else if (res.data === -2) {
          _this.$q.notify('1小时内只能更新一次,请稍后重试')
        } else if (res.data === 0) {
          _this.$q.notify('无更新')
        } else {
          _this.$q.notify('正在更新,条数:' + res.data)
        }
      }).catch(() => {
        _this.$q.notify('服务异常')
      }).finally(() => {
        _this.loading = false
      })
    },

    onClickLeft () {
      this.$router.go(-1)
    },
    onChange (e, i) {
    },
    search () {
      const _this = this
      _this.searchResult = []
      _this.loading = true
      axios({
        url: '/reptile/searchNewBook',
        params: {
          bookName: _this.searchValue
        }
      }).then(res => {
        if (res.data.state === 'success') {
          _this.searchResult = res.data.obj
        }
      }).finally(res => {
        _this.loading = false
      })
    }

  }
}
</script>
<style lang="sass" scoped>
.my-card
  width: 45%
  float: left
  margin: 5px
</style>
